<style>
    .i_border {
        border: 1px solid black;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #btn {
        width: 60px;
        height: 60px;
        position: fixed;
        /* //固定定位设置 */
        right: 30px;
        bottom: 30px;
        background-color: rgb(207, 207, 207);
        border-radius: 30px;
        display: none;
        justify-content: center;
        align-items: center;
        color: honeydew;
    }

    .box {
        /* border: solid 1px #C9C9C9; */
        margin: 10px;
    }

    .word-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }

    .word {
        /* margin:10px !important; */
        /* border: 1px solid #C9C9C9; */
        background-color: #fff;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        padding: 7px;
        background-color: gray;
        transition: all 0.6s;
        height: 32px;
    }

    .word:hover {
        transform: scale(1.2);
    }

    .show_component {
        border: 1px solid #C9C9C9;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-top: 10px;
    }

    .btn-card {
        /* background-color: rgba(0, 0, 0, 0.507); */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }

    .btn-card .small {
        margin-right: 5px;
    }

    .avatar {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .author-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .author-info .name {
        margin-left: 10px;
        font-size: 14px;
        color: black;
        line-height: 25px;
    }

    .author-info .tag {
        margin-left: 10px;
        color: #aaa;
        font-size: 12px;
        line-height: 22px;
    }

    .author-info button {
        margin-left: auto;
        margin-right: 10px;
    }

    .bar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .xx-waterflow {
        width: 100%;
        height: 100%;
        position: relative;
        overflow-y: visible !important;
    }
</style>

<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>

<script>
    debugger;
    {
        var render_somthing_component_list;
        render_somthing_component_list = new render_somthing();
        render_somthing_component_list.init({
            // div的id
            id: "#component_list",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div class="word-card"></div>
`
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="type_click" class="word" style="background-color: #{bgcolor};">#{desc}</div>
`,
            },
            field_function: [{
                field: "create_time",
                type: "format_datetime",
                format: "to-now",
            }, ],
            callback: {
                click: function (res) {
                    if (res.key == "type_click") {
                        //渲染列表
                        window['desc'] = res.value.desc;
                        render_somthing_component_type_list.render(madeComponent(res.value.desc));
                    }
                }
            },
        })
        var data = [{
            key: 'loading'
        }, {
            key: 'slide'
        }, {
            key: 'tabbar'
        }, {
            key: '下拉'
        }, {
            key: '九宫格'
        }, {
            key: '位置'
        }, {
            key: '倒计时'
        }, {
            key: '内容'
        }, {
            key: '动画'
        }, {
            key: '单选'
        }, {
            key: '取色器'
        }, {
            key: '地图'
        }, {
            key: '图表'
        }, {
            key: '多选'
        }, {
            key: '布局'
        }, {
            key: '弹幕'
        }, {
            key: '弹窗'
        }, {
            key: '折叠'
        }, {
            key: '抽奖'
        }, {
            key: '抽屉'
        }, {
            key: '拖拽'
        }, {
            key: '排序'
        }, {
            key: '日期段'
        }, {
            key: '时间'
        }, {
            key: '时间段'
        }, {
            key: '朋友圈'
        }, {
            key: '树形'
        }, {
            key: '横向'
        }, {
            key: '步骤'
        }, {
            key: '滑动'
        }, {
            key: '滑块'
        }, {
            key: '瀑布流'
        }, {
            key: '点赞'
        }, {
            key: '电商'
        }, {
            key: '画廊'
        }, {
            key: '编辑器'
        }, {
            key: '翻转'
        }, {
            key: '翻页'
        }, {
            key: '聊天'
        }, {
            key: '菜单'
        }, {
            key: '视频'
        }, {
            key: '订阅'
        }, {
            key: '评分'
        }, {
            key: '评级'
        }, {
            key: '评论'
        }, {
            key: '询问'
        }];
        var that = this;
        //预处理数据
        var component_name = [];
        data.forEach(element => {
            component_name.push({
                desc: element.key,
                bgcolor: get_random_color()
            });
        });
        render_somthing_component_list.render(component_name);

        //获取循环三原色
        function get_random_color() {
            var google_blue = '#2d85f0';
            var google_red = '#f4433c';
            var google_yellow = '#ffbc32';
            var google_green = '#0aa858';
            if (window.flag == undefined || window.flag == 3) {
                window.flag = -1;
            }
            window.flag = window.flag + 1;
            switch (window.flag) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }
        }
       
        var render_somthing_component_type_list;
        render_somthing_component_type_list = new render_somthing();
        render_somthing_component_type_list.init({
            // div的id
            id: "#component_type_list2",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div ></div>
    `
            },
            //<div>#{create_time}</div>
            // 渲染内容的配置
            content: {
                default: `
<div class="show_component" style="margin-right:10px;width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>

                        <img style="margin-left:auto;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
                            <i title="重命名" data-key="rename_component" style="margin-left:auto;font-size: 18px;padding-left: 2px;padding-top: 2px;" class="i_border layui-icon layui-icon-survey"></i>
                            <i title="编辑" data-key="edit_component" style="margin-left:10px;font-size: 20px;" class="i_border layui-icon layui-icon-edit"></i>
                            <i title="删除" data-key="delete_component" style="font-size: 20px;margin-left:10px;" class=" i_border layui-icon layui-icon-delete"></i>
                            <i title="刷新" data-key="reload_component" style="margin-left:10px;font-size: 18px;" class="i_border layui-icon layui-icon-refresh"></i>
                            <i id="audit_#{component_id}" title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;" class="i_border layui-icon layui-icon layui-icon-auz"></i>
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="margin-left:-10px;height: #{height}px;" src="https://res.dcdev.net/component/#{component_id}.html"></iframe>
</div>
`,
            },
            condition: [{
                //渲染条件
                expression: `#{is_audit} == '1'`,
                //渲染模板
                html: `
                <div class="show_component" style="width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>

                        <img style="margin-left:auto;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
                            <i title="重命名" data-key="rename_component" style="margin-left:auto;font-size: 18px;padding-left: 2px;padding-top: 2px;" class="i_border layui-icon layui-icon-survey"></i>
                            <i title="编辑" data-key="edit_component" style="margin-left:10px;font-size: 20px;" class="i_border layui-icon layui-icon-edit"></i>
                            <i title="删除" data-key="delete_component" style="font-size: 20px;margin-left:10px;" class=" i_border layui-icon layui-icon-delete"></i>
                            <i title="刷新" data-key="reload_component" style="margin-left:10px;font-size: 18px;" class="i_border layui-icon layui-icon-refresh"></i>
                            <i id="audit_#{component_id}" title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;color:red;border: 1px solid red;" class="i_border layui-icon layui-icon layui-icon-auz"></i>
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="margin-left:-10px;height:568px;"></iframe>
</div>
                `
            }],
            field_function: [{
                field: "create_time",
                type: "format_datetime",
                format: "to-now",
            }, ],
            callback: {
                click: function (res) {
                    var data = res;
                    console.log(data)
                    if (res.key == "use_component") {
                        console.log("点击")
                        var audit;
                        var tips;
                        if (window[data.value.component_id].audit == undefined) {
                            window[data.value.component_id].audit = data.value.is_audit;
                        }
                        if (window[data.value.component_id].audit == "0") {
                            tips = "确定允许此组件审核？";
                        } else {
                            tips = "确定取消此组件审核？"
                        }
                        ui_class.show_confirm(tips, null,
                            function (res) {
                                if (res.res) {
                                    if (window[data.value.component_id].audit == "0") {
                                        audit = '1';
                                        window[data.value.component_id].audit = "1";
                                    } else {
                                        audit = '0';
                                        window[data.value.component_id].audit = "0";
                                    }
                                    var url =
                                        "https://api.dcdev.net/v1.0.1/component/audit_component.php";

                                    var _data = {
                                        "component_id": data.value.component_id,
                                        "is_audit": audit
                                    }
                                    $.ajax({
                                        method: "post",
                                        dataType: "json",
                                        url: url,
                                        data: {
                                            params: JSON.stringify(_data)
                                        },
                                        success: function (res) {
                                            if (res.res) {
                                                if (_data.is_audit == "0") {
                                                    ui_class.show_success("取消通过审核.");
                                                    $(`#audit_${data.value.component_id}`)
                                                        .css('color', "black");
                                                    $(`#audit_${data.value.component_id}`)
                                                        .css('border',
                                                            "1px solid black");

                                                } else {

                                                    ui_class.show_success("已通过审核.");
                                                    $(`#audit_${data.value.component_id}`)
                                                        .css('color', "red");
                                                    $(`#audit_${data.value.component_id}`)
                                                        .css('border', "1px solid red");

                                                }

                                            }
                                        }
                                    })
                                }
                            })
                        // ui_class.show_confirm(`确定要添加该组件？`, null,
                        //     function (res) {
                        //         if (res.res) {
                        //             if ($('#' + data.ul_value.vendor).css("background-color") !=
                        //                 "rgb(194, 194, 194)") {
                        //                 //已选
                        //             } else {
                        //                 //选择
                        //                 $('#' + data.ul_value.vendor).css("background-color",
                        //                     "#5FB878");
                        //                 selected_framework.push(data.ul_value.vendor)
                        //                 // madeImport(selected_framework)
                        //             }
                        //             $.get(`https://res.dcdev.net/component/${data.ul_value.component_id}.html`,
                        //                 function (
                        //                     html) {
                        //                     var id = Date.parse(new Date());
                        //                     //组件添加时，添加前后注释
                        //                     var head =
                        //                         `<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} start-->\n`
                        //                     var bottom =
                        //                         `\n<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} end-->`
                        //                     html_temp = head + html + bottom;
                        //                     //统一判断除重
                        //                     html_temp = cleanRepeatScriptAndLinkSrc(
                        //                         html_temp,
                        //                         editor.getValue())
                        //                     insert_to_editor(html_temp + '\n\n');
                        //                 })
                        //         }
                        //     })
                    }
                    if (res.key == 'edit_component') {
                        ui_class.show_confirm(`确定要修改该组件？`, null,
                            function (res) {
                                if (res.res) {
                                    window.open(
                                        `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.value.component_id}`
                                    );
                                }
                            })
                    }
                    if (res.key == 'rename_component') {
                        var component_desc = res.value.desc;
                        var component_id = res.value.component_id;
                        ui_class.show_inputor({
                            type: "char",
                            title: "重命名组件",
                            text: component_desc,
                            opacity: 0.2,
                            min_value: 4,
                            max_value: 20,
                        }, function (res) {
                            $(`#page_name`).val(res.text);
                            var url =
                                "https://api.dcdev.net/v1.0.1/component/update_component.php";
                            var data = {
                                "component_id": component_id,
                                "vendor": selected_framework.join(","),
                                "desc": $(`#page_name`).val() ? $(`#page_name`)
                                    .val() : "",
                            }
                            $.ajax({
                                method: "post",
                                dataType: "json",
                                url: url,
                                data: {
                                    params: JSON.stringify(data)
                                },
                                success: function (res) {
                                    if (res.res) {
                                        ui_class.show_success("更名成功.");
                                    } else {
                                        ui_class.show_error(res.desc);
                                    }
                                }
                            })
                        })
                    }
                    if (res.key == 'reload_component') {
                        $(`#${data.value.component_id}`).attr('src', $(`#${data.value.component_id}`).attr(
                            'src'));
                    }
                    if (res.key == 'delete_component') {
                        ui_class.show_confirm(`确定要删除该组件？`, null,
                            function (res) {
                                if (res.res) {
                                    var url =
                                        "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                    var _data = {
                                        "component_id": data.value.component_id,
                                    }
                                    $.ajax({
                                        method: "post",
                                        dataType: "json",
                                        url: url,
                                        data: {
                                            params: JSON.stringify(_data)
                                        },
                                        success: function (res) {
                                            render_somthing_component_type_list.render(
                                                madeComponent(window['desc']));
                                        }
                                    })
                                }
                            })
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [],
        })

        //制作对应的组件的数组
        function madeComponent(name) {
            var data = [];
            var that = this;
            $.ajax({
                type: "post",
                url: "https://api.dcdev.net/v1.0.1/component/get_component_by_participle.php",
                data: {
                    params: JSON.stringify({
                        "participle": name
                    })
                },
                async: false,
                success: function (res) {
                    that.data = JSON.parse(res);
                }
            });
            return that.data.data;
        }
        //实时获取按钮div高度并滑动
        function getDivHeight(name) {
            var height = $(name).outerHeight(true);
            $('html , body').animate({
                scrollTop: height
            }, 'slow');
        }
    }
</script> 